<template>
  <div class="form">
    <h2 class="title"></h2>
    <a-divider :style="{ color: '#000' }" />
    <a-form :model="form" :style="{ width: '680px' }">
      <div>
        <a-space direction="vertical" :style="{ width: '100%' }">
          <a-upload
            action="/"
            :fileList="file ? [file] : []"
            :show-file-list="false"
            @change="onChange"
            @progress="onProgress"
          >
            <template #upload-button>
              <div
                :class="`arco-upload-list-item${
                  file && file.status === 'error'
                    ? ' arco-upload-list-item-error'
                    : ''
                }`"
              >
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="file && file.url"
                >
                  <img :src="file.url" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                  <a-progress
                    v-if="file.status === 'uploading' && file.percent < 100"
                    :percent="file.percent"
                    type="circle"
                    size="mini"
                    :style="{
                      position: 'absolute',
                      left: '50%',
                      top: '50%',
                      transform: 'translateX(-50%) translateY(-50%)',
                    }"
                  />
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
              </div>
            </template>
          </a-upload>
        </a-space>
        <a-form
          :model="form"
          :style="{ width: '600px' }"
          @submit="handleSubmit"
        >
        </a-form>
      </div>
      <a-form-item
        field="publisher"
        label="发布人："
        style="margin-bottom: 40px"
      >
        <a-input
          v-model="form.publisher"
          placeholder="请输入发布人"
          style="width: 400px; background-color: #fff; border-radius: 10px"
        />
      </a-form-item>

      <a-form-item field="timer" label="发布时间:" style="margin-bottom: 40px">
        <a-input
          v-model="form.timer"
          placeholder="请输入发布时间"
          style="width: 400px; background-color: #fff; border-radius: 10px"
        />
      </a-form-item>
      <div class="btn" style="width: 600px">
        <a-button type="primary" class="confirm" @click="confirmFun"
          >创建</a-button
        >
        <a-button type="dashed" class="cancel" @click="cancelFun"
          >取消</a-button
        >
      </div>
    </a-form>
    <a-divider :style="{ color: '#000' }" />
  </div>
</template>

<script>
export default {
  props: {
    teacherlist: { type: Array },
  },
  data() {
    return {
      // classname:[],
      // 表格收集的数据
      form: {
        seriesId: '',
        publisher: '',
        timer: '',
        role: '',
      },
    };
  },
  methods: {
    //获取科目
    getAccountList() {
      getUserList({
        pageNum: 1,
        pageSize: 100,
      }).then((res) => {
        console.log(res.data.data.list);
        this.classList = res.data.data.list;
      });
    },
    //跳转页面
    gotoa() {
      this.$router.go(0);
    },
    // 创建事件
    confirmFun(form) {
      console.log(this.form.seriesId, this.form.Username, this.form.phone);
      //添加科目
      addUser({
        id: this.form.seriesId,

        username: this.form.classname,
        id: this.form.seriesId,
        avatar: this.form.avatar,
        mobile: this.form.mobile,
        salt: this.form.salt,
      })
        .then((res) => {
          alert('添加成功!');
          // getAccountList(); 写不出来 组件组件 调用函数
          this.gotoa();
        })
        .catch((err) => {
          // alert("格式错误");
          console.log(err);
          this.form.classname = '';
          this.form.seriesId = '';
          this.form.technology = '';
          this.form.time = '';
        });
      console.log('1');
      // 关闭窗口
      this.$emit('cancelfun', false);
    },
    // 取消创建事件
    cancelFun() {
      this.$emit('cancelfun', false);
    },
  },
};
</script>

<style scoped lang="less">
.title {
  margin-left: 50px;
}
.btn {
  margin-left: 250px;
  .cancel {
    margin-left: 20px;
  }
}
.form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 600px;
  height: 600px;
}
a-form-item {
  margin-bottom: 20px;
}

</style>